<template>
    <div class="outside">
        <el-container>
            <el-header class="header">外勤打卡</el-header>
            <el-main>
                <!-- 操作按钮 -->
                
                <!-- 导入/上传的思路: 点击按钮, 弹出文件选择框, 选择文件并上传文件到服务器( 往往需要提前设置 上传地址,上传请求的请求头参数, 上传字段名, 上传时附带的额外参数 ). -->

                <div class="btns">
                    <el-button type="warning" @click="showDialog">发起新的</el-button>
                   
                    <el-upload action="/api/outside/import" :headers="headers" name="excel" :data="{ userid: formData.userid }" :on-change="onChange" :on-success="onSuccess" :on-error="onError" :show-file-list="false" :disabled="uploading" accept=".xlsx;.slx">
                        <el-button :loading="uploading">导入</el-button>
                    </el-upload>

                    <el-tabs v-model="activeName" class="tabs" @tab-change="handleClick">
                        <el-tab-pane label="待办事项" name="1"></el-tab-pane>
                        <el-tab-pane label="已办事项" name="2"></el-tab-pane>
                        <el-tab-pane label="抄送事项" name="3"></el-tab-pane>
                        <el-tab-pane label="我发起的" name="4"></el-tab-pane>
                        <el-tab-pane label="全部数据" name="5"></el-tab-pane>
                        <el-tab-pane label="概览" name="6"></el-tab-pane>
                        <el-tab-pane label="统计报表" name="7"></el-tab-pane>
                    </el-tabs>
                </div>

                <!-- 表格 -->
                <el-table :data="tableData" style="width: 100%">
                    <!-- prop 字段名称 对应列内容的字段名 -->
                    <!-- show-overflow-tooltip 当内容过长被隐藏时显示 tooltip -->
                    <!-- formatter 用来格式化内容 -->
                    <el-table-column prop="_id" label="编号" show-overflow-tooltip  />
                    <el-table-column prop="status" label="当前流程" :formatter="formatterStatus"/>
                    <el-table-column prop="name" label="打卡人"  />
                    <el-table-column prop="checktype" label="打卡类型" width="200px" />
                    <el-table-column prop="checktime" label="打卡时间" :formatter="formatterTime" width="150px" />
                    <el-table-column prop="time" label="申请时间" :formatter="formatterTime" width="150px" />
                    
                    <el-table-column label="操作" width="100px" >
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                            @click.prevent="editRow(scope)"
                            >
                            编辑
                            </el-button>
                            <el-button link type="primary" size="small"
                            @click.prevent="deleteRow(scope)"
                            >
                            删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <el-pagination class="pagination" background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" />

                <!-- 抽屉 -->
                <el-drawer
                    ref="drawerRef"
                    v-model="addDialog"
                    title="外勤打卡"
                    direction="rtl"
                    custom-class="demo-drawer"
                >
                    <div class="demo-drawer__content">
                        <!-- 新增表单 -->
                        <el-form :model="formData" label-position="top" :rules="rules" ref="formRef">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="打卡人" prop="name" >
                                        <el-input v-model="formData.name" disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在部门" >
                                        <el-input v-model="formData.dept" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="打卡类型" prop="checktype" >
                                        <el-input type="textarea" v-model="formData.checktype" placeholder="请选择" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="打卡时间" prop="checktime" >
                                        <el-date-picker
                                            v-model="formData.checktime"
                                            type="date"
                                            placeholder="选择打卡日期"
                                        />
                                    </el-form-item>
                                </el-col>
                                
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="申请时间" prop="time" >
                                        <el-date-picker
                                            v-model="formData.time"
                                            type="date"
                                            placeholder="选择申请日期"
                                        />
                                    </el-form-item>
                                </el-col>
                                
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="定位" >
                                        <el-input v-model="formData.days"  />
                                    </el-form-item>
                                </el-col>
                               
                            </el-row>
                        </el-form>

                        <div class="demo-drawer__footer">
                            <el-button @click="addDialog = false">取消</el-button>
                            <el-button type="primary" @click="onSubmit(formRef)">提交申请</el-button>
                        </div>
                    </div>
                </el-drawer>
                
            </el-main>
        </el-container>
    </div>
</template>

<script setup>

import { ref, onMounted, reactive } from "vue";
import { outside_list, outside_add, outside_delete } from '../../api/index'
import { ElNotification } from 'element-plus'

var headers = ref({ Authorization: 'Bearer' + ' ' + localStorage.getItem('token') })
var activeName = ref('');
var tableData = ref([]);
var total = ref(0);
var addDialog = ref(false);
var formData = ref({
    userid: JSON.parse(localStorage.getItem('userinfo'))._id,
    name: JSON.parse(localStorage.getItem('userinfo')).name,
    checktype: '',
    checktime: '',
    time: '',
});
var formRef = ref();
var uploading = ref(false);

//验证 打卡人
const validateName = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入打卡人'))
    } else {
        callback()
    }
}

//验证 打卡类型
const validateChecktype = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入打卡类型'))
    } else {
        callback()
    }
}

//验证 打卡日期
const validateChecktime = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请选择一个出发日期'))
    } else {
        if (new Date(formData.value.starttime) - new Date(formData.value.endtime) > 0) {//返回日期必须大于出发日期
            formData.value.starttime = '';
            formData.value.days = '';
            callback(new Error('出发日期必须早于返回日期!'))
        } else if (formData.value.starttime && formData.value.endtime) { //出发日期,返回日期都存在, 计算总天数
            formData.value.days = (new Date(formData.value.endtime) - new Date(formData.value.starttime)) / (24 * 60 * 60 * 1000)
        }
        callback()
    }
}

//验证 返回日期
const validateEndtime = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请选择一个返回日期'))
    } else {

        if (new Date(formData.value.starttime) - new Date(formData.value.endtime) > 0) {//返回日期必须大于出发日期
            formData.value.endtime = '';
            formData.value.days = '';
            callback(new Error('返回日期必须大于出发日期!'))
        } else if (formData.value.starttime && formData.value.endtime) { //出发日期,返回日期都存在, 计算总天数
            formData.value.days = (new Date(formData.value.endtime) - new Date(formData.value.starttime)) / (24 * 60 * 60 * 1000)
        }
        callback()
    }
}

//验证 出差总天数
const validateDays = (rule, value, callback) => {
    if (value === '' || Number(value) == 0) {
        callback(new Error('请填写正确的总天数'))
    } else {
        callback()
    }
}

//表单的验证规则 rules
const rules = reactive({
    name: [{ validator: validateName, trigger: 'blur', required: true, }],
    checktype: [{ validator: validateChecktype, trigger: 'blur', required: true, }],
    checktime: [{ validator: validateChecktime, trigger: 'blur', required: true, }],
})

//组件挂载完成时, 请求打卡申请列表
onMounted(async () => {
    var userinfo = JSON.parse(localStorage.getItem('userinfo'));
    var res = await outside_list({ userid: userinfo._id, page: 1 })
    console.log(res, 111)
    tableData.value = res.data.list;
    total.value = res.data.total;
})

//发起新的 出差申请
var showDialog = () => {
    addDialog.value = true;//显示抽屉
    formRef.value.resetFields(); //重置表单
    formData.value = {
        userid: JSON.parse(localStorage.getItem('userinfo'))._id,
        name: JSON.parse(localStorage.getItem('userinfo')).name,
        checktype: '',
        checktime: '',
        time: '',
    }
    delete formData.value._id;//删除_id属性
}

//添加文件、上传成功和上传失败时的回调
var onChange = (uploadFile, uploadFiles) => {
    if (uploadFile.percentage < 100) {
        uploading.value = true;//显示loading
    }
}

//文件上传成功时的回调
var onSuccess = (response, uploadFile, uploadFiles) => {
    uploading.value = false;//隐藏loading
    if (response.code == 200) {
        ElNotification({ //弹出通知
            title: '导入通知',
            message: response.msg,
            type: 'success',
        })
    }
}

//文件上传失败时的回调
var onError = (error, uploadFile, uploadFiles) => {
    uploading.value = false;//隐藏loading
    if (error) {
        ElNotification({ //弹出通知
            title: '导入通知',
            message: '导入失败!',
            type: 'error',
        })
    }
}

var handleClick = (name) => {
    console.log(activeName.value, name);
}
//格式化 流程状态
var formatterStatus = function (row, column, cellValue, index) {
    return cellValue == 0 ? '审核中' : '已通过';
}
//补零
var addZero = (num) => {
    return num < 10 ? '0' + num : num;
}
//格式化时间
var formatterTime = function (row, column, cellValue, index) {
    var d = new Date(cellValue);
    return `${d.getFullYear()}-${addZero(d.getMonth() + 1)}-${addZero(d.getDate())}`;
}
//分页
var handleCurrentChange = async (page) => {
    //请求page对应页码的数据
    var userinfo = JSON.parse(localStorage.getItem('userinfo'));
    var res = await outside_list({ userid: userinfo._id, page })
    tableData.value = res.data.list;
}
//编辑
var editRow = (scope) => {
    console.log(formData.value, scope.row);
    //弹出抽屉
    addDialog.value = true;
    //回显 当前行的出差申请的数据
    //formData.value = scope.row;//直接用对象给对象赋值,容易导致数据之间互相影响( 最好在赋值之前做个深拷贝 )
    formData.value = JSON.parse(JSON.stringify(scope.row));
}
//删除
var deleteRow = async (scope) => {
    //scope.$index
    //scope.row 当前行的数据对象
    //scope.row._id 当前行的数据对象的id
    var userinfo = JSON.parse(localStorage.getItem('userinfo'));
    var res = await outside_delete({ userid: userinfo._id, id: scope.row._id, page: 1 })
    if (res.data.code == 200) {
        console.log(res.data);
        ElNotification({ //弹出通知
            title: '删除通知',
            message: res.data.msg,
            type: 'success',
        })
        tableData.value = res.data.list;
        total.value = res.data.total;
    }
}

//提交表单
var onSubmit = (formRef) => {
    formRef.validate(async (valid) => {
        if (valid) {

            //判断提交表单时的动作是"新增"还是"编辑", 依据是: formData中是否有_id属性
            if (formData.value._id) {
                //发起编辑请求
                //await outside_edit( formData.value )
                ElNotification({ //弹出通知
                    title: '编辑通知',
                    message: '编辑成功!',
                    type: 'success',
                })
                addDialog.value = false;//关闭抽屉
            } else {
                //发请求, 新增出差申请
                var res = await outside_add(formData.value);
                if (res.data.code == 200) { //如果服务端返回 200, 表示新增成功
                    ElNotification({ //弹出通知
                        title: '新增通知',
                        message: res.data.msg,
                        type: 'success',
                    })
                    addDialog.value = false;//关闭抽屉
                    tableData.value = res.data.list;
                    total.value = res.data.total;
                    formRef.resetFields(); //重置表单
                } else {
                    ElNotification({
                        title: '新增通知',
                        message: res.data.msg,
                        type: 'error',
                    })

                }
            }
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>

<style scoped lang='scss'>
.outside {
    .header {
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .btns {
        display: flex;

        .tabs {
            margin-left: 30px;
        }
    }

    .pagination {
        margin: 20px 0;
    }
}
</style>